<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>商品列表</title>
    <meta name="keywords" content="文乐文" />
    <meta name="description" content="文乐文" />

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" />
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="static/css/common.css" type="text/css" />
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- 包含头部 -->
      <div class="car">
        <img src="./static/image/car.png" alt="" srcset="" />
      </div>
      <div class="header_box">
        <!-- container-fluid -->
        <div class="header container">
          <div class="logo_box">
            <img src="static/picture/logo2.png" />
          </div>
          <div class="nav_box">
            <a href="index.html">
              <div class="item">首页</div>
            </a>
            <a href="goods.html">
              <div class="item active">产品中心</div>
            </a>
            <a href="integral.html">
              <div class="item">积分商城</div>
            </a>
            <a href="lease.html">
              <div class="item">进销存ERP</div>
            </a>
            <a href="service.html">
              <div class="item">服务与支持</div>
            </a>
            <a href="my.html">
              <div class="item">个人中心</div>
            </a>
          </div>
          <div class="buy-box">
            <a href="javascript:;" class="tit">购买</a>
            <div class="sub" style="display: none">
              <div class="list">
                <a
                  target="_blank"
                  href="https://mall.jd.com/index-11504190.html?from=pc"
                  >文乐文京东旗舰店</a
                >
              </div>
            </div>
          </div>
          <div class="search_box">
            <input
              name="keyword"
              type="text"
              class="search_input"
              id="header_search_input"
              placeholder="搜索"
            />
            <button id="header_search_btn" class="search_btn"></button>
          </div>
        </div>
      </div>

      <div class="page_product_list container">
        <div class="title">产品列表/Product list</div>
        <div class="product_cat col-sm-2">
          <ul class="nav_list">
            <li class="item all"><a href="">全部产品</a></li>
            <li class="item" v-for="(item,index) in fenleiList" :key="index">
              <span @click="changeFenlei(item.id)">{{item.name}}</span>
              <div v-if="item.child && item.child.length>0">
                <div v-for="(item2,index2) in item.child" :key="index2">
                  <span @click="changeFenlei(item.id)" style="margin-left: 30px"
                    >{{item2.name}}</span
                  >
                  <div v-if="item2.child && item2.child.length>0">
                    <div v-for="(item3,index3) in item2.child" :key="index3">
                      <span
                        @click="changeFenlei(item.id)"
                        style="margin-left: 30px"
                        >{{item3.name}}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="product_list col-sm-10">
          <div class="product_box row">
            <a
              :href="'detail.html?id='+item.id"
              v-for="(item,index) in goodslist"
              :key="index"
            >
              <div class="item">
                <div class="img_box"><img :src="item.image" /></div>
                <div class="name">{{item.storeName}}</div>
              </div>
            </a>
          </div>
          <div class="page_box row">
            <el-pagination
              background
              layout="prev, pager, next"
              @change="changePage"
              :page-size="query.limit"
              :total="total"
            />
          </div>
        </div>
      </div>

      <!-- 包含公共底部文件 -->
      <div class="footer">
        <div class="footer_box container">
          <div class="contact_box col-sm-4 f-cb">
            <div class="dtitle">服务/Service</div>
            <div class="tel_box">
              <p class="title">全国统一热线电话</p>
              <p class="tel">0574-58974484</p>
            </div>
            <div class="mail_box">
              <p class="title">服务邮箱</p>
              <p class="mail">598292588@qq.com</p>
            </div>
          </div>
          <div class="nav_list col-sm-4 f-cb">
            <div class="dtitle">导航/Navigation</div>
            <ul class="nav_box">
              <li><a href="about.html">关于我们</a></li>
              <li><a href="">商品中心</a></li>
              <li><a href="lease.html">打印机租赁</a></li>
              <li><a href="service.html">服务与支持</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
          </div>
          <div class="search col-sm-4 f-cb">
            <div class="dtitle">产品中心/Product center</div>
            <div class="search_box">
              <input class="search_input" name="keyword" placeholder="搜索" />
              <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
              <a
                class="btn btn-primary jd_btn"
                target="_blank"
                href="https://mall.jd.com/index-11504190.html?from=pc"
                >京东商城</a
              >
            </div>
            <div class="wechat_box">
              <div class="item">
                <img src="static/picture/wechat.svg" />
              </div>
              <div class="item">
                <img src="static/picture/weibo.svg" />
              </div>
            </div>
          </div>
        </div>

        <div class="site_info container">
          Copyright ©2020 宁波文乐文科技有限公司 版权所有
          <a href="https://beian.miit.gov.cn/#/Integrated/index"
            >浙ICP备2020041669号-1</a
          >
        </div>
      </div>
    </div>

    <link rel="stylesheet" href="static/css/index.css" rel="stylesheet" />
    <script src="static/js/vue.js"></script>
    <script src="static/js/index.full.js"></script>

    <script src="static/js/jquery.js" type="text/javascript"></script>
    <script
      src="/portal/bootstrap/js/bootstrap.js"
      type="text/javascript"
    ></script>
    <script src="static/js/common.js" type="text/javascript"></script>
  </body>
</html>

<script>
  const { createApp, ref, reactive, onMounted } = Vue;

  createApp({
    setup() {
      var goodslist = ref([]);
      var fenleiList = ref([]);
      var total = ref(0);
      var query = reactive({
        keyword: "",
        priceOrder: "",
        salesOrder: "",
        news: 0,
        page: 1,
        limit: 6,
        cid: "",
      });

      const getFenleilist = () => {
        $.ajax({
          url: apiurl + "/api/front/category",
          data: query,
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            fenleiList.value = res.data;
          },
        });
      };
      const getGoodslist = () => {
        $.ajax({
          url: apiurl + "/api/front/products",
          data: query,
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            total.value = res.data.total;
            goodslist.value = res.data.list;
          },
        });
      };

      const changeFenlei = (id) => {
        query.cid = id;
        getGoodslist();
      };

      const changePage = (e) => {
        query.page = e;
        getGoodslist();
      };

      onMounted(() => {
        getFenleilist();

        // 创建URLSearchParams对象，传入url参数
        const urlParams = new URLSearchParams(window.location.search);
        // 获取某个参数的值
        const paramValue = urlParams.get("keyword");

        if (paramValue) {
          query.keyword = paramValue;
        }

        getGoodslist();
      });

      return {
        query,
        total,
        goodslist,
        fenleiList,
        getFenleilist,
        getGoodslist,
        changePage,
        changeFenlei,
      };
    },
  })
    .use(ElementPlus)
    .mount("#app");
</script>
